<template>
    <div class="changephone">
        <hb-title-levels :list="list"
            pathType="child" />
        <hb-box :title="Lang.changeemail[lang][2]">
            <div class="Box">
                <div class="FormCon">
                    <div class="Label"
                        v-text="Lang.changeemail[lang][3]" />
                    <hb-input @ipt="e_input"
                        formType="binkCard"
                        back="card" />

                    <div class="Label"
                        v-text="Lang.changeemail[lang][4]" />
                    <hb-input @ipt="e_inputName"
                        formType="base"
                        back="card" />

                    <div class="signupbtn cur"
                        @click="e_api"
                        v-text="Lang.changeemail[lang][5]" />
                </div>
            </div>
        </hb-box>
        <hb-dialog @clk="e_clearMsg"
            v-if="msg !== ''">
            <span v-text="msg">23333</span>
        </hb-dialog>
    </div>
</template>

<script>
import Lang from './lang.js'
import {vpost, vlink} from '@api'
export default {
	name: 'changephone',
	data() {
		return {
			Lang,
			form: {
				checkRe: false,
				inputed: '',
			},
			formName: {
				checkRe: false,
				inputed: '',
			},
			msg: '',
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
		list(){
			return [{path: 'selfset', txt: Lang.changeemail[this.$store.state.setting.lang][0]}, {path: 'changephone', txt: Lang.changeemail[this.$store.state.setting.lang][1]}]
		}
	},
	methods: {
		e_back_() {
			this.$router.push('/selfset')
		},
		e_input(checkRe, inputed, back) {
			this.form = {
				checkRe,
				inputed,
			}
		},
		e_inputName(checkRe, inputed, back) {
			this.formName = {
				checkRe,
				inputed,
			}
		},
		async e_api() {
			if (!this.form.checkRe || !this.formName.checkRe) {
				return
			}
			const param = {
				fuid: this.$store.state.user.uid,
				bankCardNumber: this.form.inputed,
				bankName: this.formName.inputed,
			}
			await vpost(vlink.user.bindCard, param).then(re => {
				this.msg = re.msg
				if (re.status === '1') {
					setTimeout(() => {
						this.$router.push('/selfset')
					}, 1200)
				}
			})
		},
		e_clearMsg() {
			this.msg = ''
		},
	},
}
</script>

<style scoped>
.hbTitle {
	margin-bottom: 20px;
}
.Box {
	display: flex;
	justify-content: center;
}
.FormCon {
	width: 525px;
	/* height: 318px; */
}
.Label {
	margin-top: 30px;
	margin-bottom: 5px;
	color: #61688a;
	font-size: 12px;
}
.signupbtn {
	height: 48px;
	margin-top: 30px;
	margin-bottom: 40px;
	background-color: #7a98f7;
	border-radius: 4px;
	text-align: center;
	line-height: 48px;
	font-size: 16px;
	color: #fff;
}
.signupbtn:hover {
	background-color: #a0b6f9;
}
</style>
